<script setup lang="ts">
import { ref } from 'vue'

const userStore = useUserStore()
const open = ref<boolean>(false)
const tenantList = userStore.tenantList
const tenantInfo = userStore.tenantInfo

function showDrawer() {
    open.value = true
}

function change(tenant: any) {
    userStore.exchangeTenant(tenant)
}
</script>

<template>
    <div hover="bg-[var(--hover-color)]" flex items-center h-48px px-12px cursor-pointer class="transition-all-300">
        <span class="anticon" @click="showDrawer()">{{ tenantInfo.name || '请选择租户' }}</span>
        <a-drawer v-model:open="open" :closable="false" placement="right" title="切换租户">
            <a-card v-for="(item, index) in tenantList" :key="index" :title="item.name" style="width: 300px">
                <template #extra>
                    <a-button v-if="tenantInfo.id !== item.id" type="primary" @click="change(item)">
                        切换
                    </a-button>
                </template>
                <p>{{ item.name }}</p>
            </a-card>
        </a-drawer>
    </div>
</template>
